<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
		<script src="js/mui.min.js"></script>

	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable">
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 菜单容器 -->

				<aside class="mui-off-canvas-left" id="offCanvasSide">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll caidan">
							<!-- 菜单具体展示内容 -->
							<center>
								<img src="./images/default.jpg" id="bjgr"/>
							</center>
							<a href="javascript:void;" id="dlzc">登录/注册</a>
							
							<ul class="mui-table-view" id="menu-list">
								<li class="mui-table-view-cell" id="chazhao">
									<a class="mui-navigate-right">
										<span class="mui-icon iconfont icon-sousuo"></span>查找
									</a>
								</li>
								<li class="mui-table-view-cell" id="heimingdan">
									<a class="mui-navigate-right">
										<span class="mui-icon iconfont icon-heimingdan"></span>黑名单
									</a>
								</li>
								<li class="mui-table-view-cell" id="bendi">
									<a class="mui-navigate-right">
										<span class="mui-icon iconfont icon-wenjianjia"></span>本地作品集
									</a>
								</li>
								<li class="mui-table-view-cell" id="tuichu">
									<a class="mui-navigate-right">
										<span class="mui-icon iconfont icon-tuichudenglu"></span>退出登录
									</a>
								</li>
							</ul>

						</div>
					</div>
				</aside>
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
					<!--<h1 class="mui-title mui-text-left">关注</h1>-->
					<h1 class="mui-title mui-text-center">启嘉大电影</h1>
					<!--<h1 class="mui-title mui-text-right">同城</h1>-->
					<a class="mui-icon mui-pull-right" href="#popover" id="openPopover">
						<span class="mui-icon iconfont icon-xiangji"></span>
					</a>
				</header>
				
				<!--点击弹出-->
				<div id="popover" class="mui-popover" style="display: none;">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#">录视频</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">在本地选择</a>
						</li>
						
					</ul>
				</div>
				<!-- 主页面内容容器 -->
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll zhujiemian">
						<!-- 主界面具体展示内容 -->
						<div class="mui-card" id="shipin">
							<!--内容区-->
							<div class="mui-card-content">
								<img src="images/yuan.jpg" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<img class="mui-media-object mui-pull-left touxiang" src="./images/yuan.jpg">
								<span class="mui-icon iconfont icon-xin">10397</span>
							</div>
						</div>
						<div class="mui-card">
							<!--内容区-->
							<div class="mui-card-content">
								<img src="images/yuan.jpg" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<img class="mui-media-object mui-pull-left touxiang" src="./images/yuan.jpg">
								<span class="mui-icon iconfont icon-xin">10397</span>
							</div>
						</div>
						<div class="mui-card">
							<!--内容区-->
							<div class="mui-card-content">
								<img src="images/yuan.jpg" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<img class="mui-media-object mui-pull-left touxiang" src="./images/yuan.jpg">
								<span class="mui-icon iconfont icon-xin">10397</span>
							</div>
						</div>
						<div class="mui-card">
							<!--内容区-->
							<div class="mui-card-content">
								<img src="images/yuan.jpg" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<img class="mui-media-object mui-pull-left touxiang" src="./images/yuan.jpg">
								<span class="mui-icon iconfont icon-xin">10397</span>
							</div>
						</div>
						<div class="mui-card">
							<!--内容区-->
							<div class="mui-card-content">
								<img src="images/yuan.jpg" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<img class="mui-media-object mui-pull-left touxiang" src="./images/yuan.jpg">
								<span class="mui-icon iconfont icon-xin">10397</span>
							</div>
						</div>
						<div class="mui-card">
							<!--内容区-->
							<div class="mui-card-content">
								<img src="images/yuan.jpg" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<img class="mui-media-object mui-pull-left touxiang" src="./images/yuan.jpg">
								<span class="mui-icon iconfont icon-xin">10397</span>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript" charset="utf-8">
		mui.init();
		//屏幕滚动
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005

		});
	</script>
	<script type="text/javascript" src="js/tiaoZhuan.js"></script>

</html>